<template>
    <div>
      <header1></header1>
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="grid-content bg-purple">
             <List border v-for="a in articleList" :key=a.article_id >
                <ListItem >{{a.article_id}}--{{a.article_title}}</ListItem>
                <router-link to="/article" style="display:inline"><Button style="position:absolute;right:15px;top:8px" type="success" @click="getArticleId(a.article_id)">观看</Button></router-link>
             </List>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 日历组件：无法调整宽高 -->
            <!-- <el-calendar v-model="value" class="registerBox"></el-calendar> -->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <h1>每日一句</h1>
                <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-grape"></el-button>
              </div>
              <div class="text item">
                与日进，与时进
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <div >{{this.$store.state.articleid}}</div>
        <el-backtop  :bottom="100">
        <div
          style="{
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          }"
        >
        UP
      </div>
      </el-backtop>
    </div>
</template>

<script>
import header from '../components/header.vue';

  export default{
    data(){
      return{
        html:'',
        code:'',
        articleList:'',
        value:new Date(),
      }
    },
    methods: {
      // getArticle(){
      //   let that = this;
      //   this.$axios.get("/queryArticleById")
      //   .then((res)=>{
      //     that.html = res.data.object.article_content;
      //     console.log(res);
      //     console.log("that:"+that.html);
      //   })
      //   .catch((err)=>{
      //     console.log(err)
      //   })
      // },
      getArticleList(){
        let that = this;
        this.$axios.get("/findArticleAll")
          .then((res)=>{
            that.articleList = res.data.object;
            console.log(that.articleList);
            console.log("id:"+res.data.object.article_id)
          })
          .catch((err)=>{return err})
      },
      getArticleId(id){
        this.$store.commit('setId',id);
        console.log(id);
      }
    
    },
    components:{'header1':header},
    created(){
      this.getArticleList();
    }
  }

</script>

<style lang="scss">
  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
  .el-calendar__body{
    margin: 0px;
  }
  .el-calendar-day{
    width: 39px;
    height: 39px;
  }
  .el-calendar-table__row{
    width: 39px;
    height: 39px;
  }

  tr td{
    height: 39px;
  }
  
    
</style>